<template>
  <div>
    <el-row>
      <el-col :span="5" :offset="4">
        <img src="../assets/logobig.png" width="200" class="cursor-pointer" @click="gotoIndex()">
      </el-col>
    </el-row>
    <el-row style="background-color: #fd7a72" class="items-center">
      <el-col :span="8" :offset="5">
        <el-image fit="fill" :src="big" style="width: 550px"></el-image>
      </el-col>
      <el-col :span="7" :offset="1" class="mt-6 mb-6 pl-4 pr-4 bg-white rounded-2xl" style="height: 390px">
        <div class="text-center font-bold text-2xl pt-5">注册</div>
        <div class="ml-6 mr-6">
          <div class="mt-3">
            <el-input placeholder="请输入邮箱" v-model="registerInfo.email">
              <template #prepend>
                <i class="iconfont icon-email"></i>
              </template>

            </el-input>
          </div>
          <div class="mt-3">
            <el-input placeholder="请输入验证码" v-model="registerInfo.code">
              <template #append>
                <el-button>获取验证码</el-button>
              </template>
            </el-input>
          </div>
          <div class="mt-3">
            <el-input placeholder="请输入密码" v-model="registerInfo.password" type="password">
              <template #prepend>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="mt-3">
            <el-input placeholder="请输入密码" v-model="retryPassword" type="password">
              <template #prepend>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </div>
          <div>
            <div class="text-red-600 float-left" style="font-size: 10px"
                 v-show="retryPassword!=''&&retryPassword!=registerInfo.password">密码不正确
            </div>
            <div @click="gotoLogin" class="float-right cursor-pointer text-gray-400 hover:text-myRed-one" style="font-size: 13px">登录</div>
          </div>
          <div class="mt-6 text-center">
            <el-button type="danger">注册</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <div class="fixed w-full bottom-0 text-center">
      <foot/>
    </div>
  </div>
</template>

<script setup lang="ts">
import Big from "../assets/big.png"
import {Lock} from "@element-plus/icons";
import {Ref, ref, reactive} from "vue";
import {useRouter} from "vue-router"

const big: object = Big
let emailType: string = ref('');
let emailTypes: Ref<array<string>> = reactive(["@qq.com", "@163.com"])
let registerInfo: Ref<object> = reactive({email: '', password: '', code: ''})
let retryPassword: Ref<string> = ref('')
const $router = useRouter();
function gotoLogin() {
  $router.push({
    name: 'otherLogin'
  })
}
function gotoIndex() {
  $router.push({
    name: 'index'
  })
}
</script>

<style scoped>
:deep(.el-input__inner):focus {
  border-color: #fd7a72;
}
</style>